<template>
  <div class="login_wrap">
    <div style="text-align: center"><h1>随心享</h1></div>
    <div style="float: left; margin-left: 200px; margin-top: 200px">
      <el-image style="width: 100px; height: 100px" :src="erweima" />
      <div @click="shuaxin">刷新二维码</div>
    </div>
    <div class="form_warp">
      <el-form ref="formRef" :model="loginDate" class="demo-dynamic">
        <el-form-item prop="phone">
          <el-input
            placeholder="请输入电话号码"
            v-model="loginDate.phone"
            :prefix-icon="Iphone"
          />
        </el-form-item>
        <el-form-item prop="password">
          <!-- v-model 数据的双向绑定 -->
          <el-input
            type="password"
            placeholder="请输入密码"
            :prefix-icon="Lock"
            v-model="loginDate.password"
            @blur="confirmpassword"
          />
        </el-form-item>
        <div v-if="vpassword">格式不正确</div>
        <el-button class="login_btn" type="primary" @click="test" round
          >登录</el-button
        >
        <router-link to="/findpassword">忘记密码</router-link> |
        <router-link to="/RegisterView">注册账号</router-link>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import axios from 'axios'
import { Iphone, Lock } from '@element-plus/icons-vue'
import '../assets/css/all.css'
import router from '@/router'
import erweima from '../assets/pic/token.png'
function shuaxin() {
  axios({
    url: 'http://localhost:8080/user/tokenpic',
    method: 'get',
    contentType: 'application/json'
  }).then(function (response) {
    console.log(response.data.data.token)
    const usertoken = response.data.data.token
    localStorage.setItem('token', usertoken)
  })
}

console.log(localStorage.getItem('token'))
// const timer = ref(null)
// onMounted(() => {
//   timer.value = setInterval(() => {
//     fun(timer)
//   }, 5000)
// })

// function fun(timer) {
//   setTimeout(() => {
//     axios({
//       url: 'http://localhost:8080/user/loginState',
//       method: 'get',
//       contentType: 'application/json',
//       params: {
//         token: localStorage.getItem('token')
//       }
//     }).then(function (response) {
//       console.log(response.data)
//     })
//   }, 0)
// }
const loginDate = reactive({
  phone: '',
  password: ''
})
const vpassword = ref(false)
// function confirmpassword() {
//   if (!/^[a-zA-Z0-9]{6}$/.test(loginDate.password)) vpassword.value = true
//   else vpassword.value = false
// }
// 切记不可将router定义在方法中，这样他不是响应式数据，会报错
// const router = useRouter()
// router.push({ path: '/about' }) //登录后，跳到个人页面
function test() {
  axios({
    url: 'http://localhost:8080/user/login',
    method: 'post',
    contentType: 'application/json',
    data: {
      phone: loginDate.phone,
      pwd: loginDate.password
    }
  }).then(function (response) {
    if (response.data.result === 'Usersuccess') {
      const usertoken = response.data.data
      localStorage.setItem('token', usertoken)
      router.push('/firstIntroduce')
    } else if (response.data.result === 'Adminsuccess') {
      const usertoken = response.data.data
      localStorage.setItem('token', usertoken)
      router.push('/adminView')
    } else {
      alert('用户名或密码错误')
    }
  })
}
</script>

<style lang="scss">
.login_wrap {
  height: 100%;
  width: 100%;
  margin: 0;
  background-image: url('../assets/1.jpg');
  background-size: 100% 100%;
  background-attachment: fixed;
}
.form_warp {
  position: fixed;
  //background: floralwhite;
  width: 220px;
  height: 200px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.login_btn {
  margin: 20px auto;
  display: block;
  width: 100%;
  height: 28px;
}
.name {
  text-align: center;
}
</style>
